<template>
    <div id="myEcharts" :style="echartsStyle"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        option: {
            type: Object,
            required: true
        },
        width: {
            type: String,
            required: true
        },
        height: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            style: {},
        }
    },
    watch: {
        option: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.setOption()
                })
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        setOption() {
            let myEcharts = echarts.init(this.$el);
            let chartsData = this.option
            myEcharts.setOption(chartsData);
            window.addEventListener('resize', myEcharts.resize);
        }
    },
    computed: {
        echartsStyle() {
            return {
                width: this.width,
                height: this.height
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>